<template>
    <div>
        <el-dialog :title='isAdd ? "添加菜单" : "编辑菜单"' :before-close="close" :visible.sync="zhe">
            <el-form :model="form" label-width="5rem" :rules="rules" ref='menuRef' center>

                <el-form-item label="菜单名称" prop="title">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>

                <el-form-item label="上级菜单" prop="pid">
                    <el-select placeholder="请选择上级菜单" v-model="form.pid" @change="changePid">
                        <el-option label="顶级菜单" :value="0"></el-option>
                        <el-option v-for="item in $store.getters['menu/getMenu']" :key="item.id" :label=item.title
                            :value=item.id></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="菜单类型">
                    <el-radio-group v-model="form.type">
                        <el-radio :label="1" disabled>目录</el-radio>
                        <el-radio :label="2" disabled>菜单</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="菜单地址" v-if="form.type == 2">
                    <el-select v-model="form.url" placeholder="请选择">
                        <el-option v-for="item in IndexRoutes" :key="item.path" :label="item.title" :value="item.path">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="图标地址" v-else>
                    <el-select v-model="form.icon" placeholder="请选择">
                        <el-option v-for="item in iconlist" :key="item" :label="item" :value="item">
                            <i :class="item"></i>
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="状态">
                    <el-switch v-model="form.status" :active-value="1" :inactive-value="2"></el-switch>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submit">确定</el-button>
                    <el-button @click="close">取消</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>
    </div>
</template>
<script>

import { menuadd, menuinfo, menuedit } from "../../request/api"
import { IndexRoutes } from "../../router";
//引入辅助函数
import { mapGetters, mapActions } from 'vuex'
export default {
    data() {
        return {
            // 表单的数据
            form: {
                title: "",
                pid: 0,
                type: 1,
                icon: "",
                url: "",
                status: false,
                id: 0
            },
            rules: {
                title: [
                    { required: true, message: "请输入菜单名称", trigger: "blur" },
                    { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
                ],
                pid: [{ required: true, message: "请选择上级菜单", trigger: "change" }],
            },
            options: [
                {
                    value: 1,
                    label: "系统管理",
                },
                {
                    value: 2,
                    label: "商城管理",
                },
            ],
            iconlist: [
                "el-icon-s-tools",
                "el-icon-setting",
                "el-icon-s-goods",
                "el-icon-goods",
            ],
            IndexRoutes: IndexRoutes,
        }
    },
    props: ["zhe", "isAdd"],
    methods: {

        //关闭遮罩层
        close() {
            this.$emit("close", false)
            this.reset()
        },
        // 表单清空事件
        reset() {
            // 清空表单数据
            this.form = {
                title: "",
                pid: 0,
                type: 0,
                icon: "",
                url: "",
                status: false
            }
            //清空正则验证
            this.$refs.menuRef.resetFields()

        },
        // 表单添加事件
        submit() {
            // 提交
            this.$refs.menuRef.validate((val) => {
                if (val) {
                    // console.log(this.form, "表单对象");
                    if (this.isAdd) {
                        //调用添加接口

                        menuadd(this.form)
                            .then(res => {
                                if (res.code == 200) {
                                    // console.log(res, '添加接口')
                                    this.$message({
                                        message: res.msg,
                                        type: 'success'
                                    });
                                } else {
                                    this.$message({
                                        message: res.msg,
                                        type: 'warning'
                                    })
                                }

                            })
                        //关闭弹窗
                        this.close()
                        //重置表格内容
                        this.reset()
                        // 重新从仓库调用请求数据列表
                        this.$store.dispatch("menu/getMEnuListActions")
                    } else {
                        //调用修改接口
                        menuedit(this.form)
                            .then(res => {
                                this.$message(res.msg);
                                // console.log(res, '修改接口')
                            })
                        //关闭弹窗
                        this.close()
                        //重置表格内容
                        this.reset()
                        // 重新从仓库调用请求数据列表
                        this.$store.dispatch("menu/getMEnuListActions")
                    }
                }
            })
        },
        // 获取单条数据
        lookup(id) {
            // console.log(id);
            menuinfo({ id })
                .then((res) => {
                    // console.log(res);
                    this.form = res.list
                    this.form.id = id
                })
        },
        changePid() {
            this.form.type = this.form.pid == 0 ? 1 : 2
        }
    },
    mounted() {

    },
    watch: {},
    computed: {
        ...mapGetters({
            getMenu: "menu/getMenuList"
        })
    },
    filters: {},
    components: {}
}
</script>
<style scoped></style>